<h3>Sale Notification</h3>
<div class="container">
  <p-table #dt [columns]="selectedColumns" [paginator]="true" [resizableColumns]="true" [rows]="10" [responsive]="true" [value]="dataSource">
    <ng-template pTemplate="caption">
      <div class="row">
        <div class="col">
          <!-- <p-button  (click)="onReload()" label="{{'Reload'|translate}}" styleClass="ui-button-primary" iconPos="left" icon="fa fa-refresh"></p-button> -->
        </div>
        <div class="col">
          <p-multiSelect [options]="cols" [(ngModel)]="selectedColumns" optionLabel="header" selectedItemsLabel="{0} columns selected"
            [style]="{minWidth: '200px'}" defaultLabel="Choose Columns"></p-multiSelect>
        </div>
        <div class="col">

          <input type="text" pInputText size="20" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
          <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
        </div>
      </div>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
      <tr>
        <th *ngFor="let col of columns" pResizableColumn [pSortableColumn]="col.field">
          {{col.header}}
          <p-sortIcon [field]="col.field"></p-sortIcon>
        </th>
        <!-- <th></th> -->
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns" class="ui-resizable-column">
      <tr>
        <td *ngFor="let col of columns" [ngSwitch]="col.field">
          <span *ngSwitchCase="'_projectName'">
            <a href="javascript:void(0)" (click)="viewProject(rowData)">{{rowData[col.field]}}</a>
          </span>
          <span *ngSwitchCase="'_lot'">
            <a href="javascript:void(0)" (click)="viewProperty(rowData)">{{rowData[col.field]}}</a>
          </span>
          <span *ngSwitchCase="'_code'">
            <a href="javascript:void(0)" (click)="viewAgent(rowData)">{{rowData[col.field]}}</a>
          </span>
          <span *ngSwitchCase="'saleNotificationContent'">
            <a href="javascript:void(0)" (click)="viewNotes(rowData)">View Detail...</a>
            {{rowData[col.field]}}
          </span>
          <span *ngSwitchDefault>
            {{rowData[col.field]}}
          </span>
        </td>
        <!-- <td>
            <p-button pTooltip="Edit" (click)="onEditRow(rowData)" styleClass="ui-button-primary" iconPos="left" icon="fa fa-pencil-square-o"></p-button>
            <p-button pTooltip="View" (click)="onViewRow(rowData)" styleClass="ui-button-primary" iconPos="left" icon="fa fa-eye"></p-button>
            <p-button pTooltip="Delete"  (click)="onDeleteRow(rowData)" styleClass="ui-button-danger" iconPos="left" icon="fa fa-trash"></p-button>
        </td> -->
      </tr>
    </ng-template>

  </p-table>
</div>
<p-dialog header="Notification" [(visible)]="display"  [modal]="true" [responsive]="true" [width]="800" [minWidth]="400" [minY]="70" 
    [maximizable]="true" [baseZIndex]="10000">
    <h5>Detail</h5>
    <div class="ui-g">
    Notification: {{currentNotification.saleNotificationContent}}
  </div>
  <div class="ui-g">
    <div *ngFor="let attachment of currentNotification['sales_notification_property_bank_card_picture']">
      <div class="ui-g-12">
        <a [href]="attachment.filePath" target="_blank" download>
          <small>{{attachment.originalFilename}}</small>
        </a>
      </div>
    </div>
  </div>
  <h5>Buyer</h5>
  <div class="ui-g">
      
      <div class="ui-g-2">FirstName:</div>
      <div class="ui-g-4">{{currentNotification.customer?.firstName}}</div>
      <div class="ui-g-2">LastName:</div>
      <div class="ui-g-4">{{currentNotification.customer?.lastName}}</div>

      
      <div class="ui-g-2">Email:</div>
      <div class="ui-g-4">{{currentNotification.customer?.privateEmail}}</div>
      <div class="ui-g-2">Street:</div>
      <div class="ui-g-4">{{currentNotification.customer?.street}}</div>

      <div class="ui-g-2">FIRB:</div>
      <div class="ui-g-4">{{currentNotification.customer?.firstBuyer}}</div>
      <div class="ui-g-2">Phone:</div>
      <div class="ui-g-4">{{currentNotification.customer?.mobile}}</div>
  
     
  </div>
  <h5>Solicitor</h5>
  <div class="ui-g">
       <div class="ui-g-2">Company:</div>
      <div class="ui-g-4">{{currentNotification.solicitor?.company}}</div>
      <div class="ui-g-2">Email:</div>
      <div class="ui-g-4">{{currentNotification.solicitor?.email}}</div>

      
      <div class="ui-g-2">Fax:</div>
      <div class="ui-g-4">{{currentNotification.solicitor?.fax}}</div>
      <div class="ui-g-2">Phone:</div>
      <div class="ui-g-4">{{currentNotification.solicitor?.phone}}</div>

      <div class="ui-g-2">Address:</div>
      <div class="ui-g-4">{{currentNotification.solicitor?.address}}</div>
      
  </div>
  <h5>Comments</h5>
  <textarea pInputTextarea rows="2" cols="30"  [(ngModel)]="comments"></textarea>
  <p-footer>
    <button type="button" pButton icon="pi pi-check" (click)="approve()" label="Approve"></button>
    <button type="button" pButton icon="fa fa-ban" (click)="reject()" label="Reject" class="ui-button-secondary"></button>
  </p-footer>
</p-dialog>
<p-growl [(value)]="msgs"></p-growl>